<template>
  <div class="goods-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="goods-main">
      <el-row :gutter="16">
        <el-col :span="6">
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            v-model="queryInfo.query"
            @input="onInputQuery"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="findShoping"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="18">
          <el-button type="primary" @click="addShoping">添加商品</el-button>
        </el-col>
      </el-row>
      <el-table
        border
        stripe
        :data="shopingList"
        style="margin-top: 16px; width: 100%"
      >
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="商品名称" prop="goods_name"></el-table-column>
        <el-table-column
          label="商品价格(元)"
          prop="goods_price"
        ></el-table-column>
        <el-table-column label="商品重量" prop="goods_weight"></el-table-column>
        <el-table-column label="商品数量" prop="goods_number"></el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <div>
              {{ scope.row.add_time | DateTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="editSubmitShoping(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteShoping(scope.row.goods_id)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 12, 15, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 编辑并且提交商品 -->
      <el-dialog
        title="编辑商品"
        :visible.sync="editSubmitShopingDialog"
        width="40%"
      >
        <el-form :model="editSubmitForm">
          <el-form-item label="商品名称">
            <el-input v-model="editSubmitForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="editSubmitForm.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="editSubmitForm.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="重量">
            <el-input v-model="editSubmitForm.goods_weight"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editSubmitShopingDialog = false">取 消</el-button>
          <el-button type="primary" @click="editSubmitShopingOk"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getShopingListApi,
  deleteShopingApi,
  editSubmitShopingApi
} from '@/http/shoping.js'
export default {
  name: 'GoodsView',
  components: {},
  data() {
    return {
      shopingList: [], // 商品列表数据
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      editSubmitShopingDialog: false, // 编辑提交商品对话框
      editSubmitForm: {
        // 编辑提交商品表单
        goods_name: '',
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_id: 0
      },
      total: 0, // 分页器total
      currentPage: 1
    }
  },
  created() {
    this.getShopingList()
  },
  mounted() {},
  methods: {
    async getShopingList() {
      const response = await getShopingListApi(this.queryInfo)
      this.shopingList = response.goods
      this.total = response.total
    },
    findShoping() {
      this.getShopingList()
    },
    onInputQuery() {
      if (!this.queryInfo.query.length) this.getShopingList()
    },
    deleteShoping(id) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteShopingApi(id)
          this.getShopingList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editSubmitShoping(row) {
      // 编辑并且提交商品
      this.editSubmitShopingDialog = true
      this.editSubmitForm.goods_name = row.goods_name
      this.editSubmitForm.goods_price = row.goods_price
      this.editSubmitForm.goods_number = row.goods_number
      this.editSubmitForm.goods_weight = row.goods_weight
      this.editSubmitForm.id = row.goods_id
    },
    async editSubmitShopingOk() {
      // 编辑成功后并且提交
      const {
        goods_name: goodsName,
        goods_price: goodsPrice,
        goods_number: goodsNumber,
        goods_weight: goodsWeight,
        goods_id: id
      } = this.editSubmitForm
      await editSubmitShopingApi(id, {
        goodsName,
        goodsPrice,
        goodsNumber,
        goodsWeight
      })
      this.getShopingList()
      this.editSubmitShopingDialog = false
    },
    addShoping() {
      this.$router.push('/add')
    },
    handleSizeChange(value) {
      // 每页多少条
      this.queryInfo.pagesize = value
      this.getShopingList()
    },
    handleCurrentChange(value) {
      // 当前页数
      this.queryInfo.pagenum = value
      this.getShopingList()
    }
  }
}
</script>

<style scoped lang="scss">
.goods-container {
  .goods-main {
    background-color: #fff;
    margin-top: 16px;
    text-align: start;
    box-sizing: border-box;
    padding: 16px;
  }
}
</style>
